<template>
    <div>
        <div class="item" @click="showEditInput" v-show="!isEdit">{{text}}</div>
        <input ref="inptRef" class="item edit" v-model="editMsg" v-show="isEdit"/>
    </div>
</template>
<script>
export default{
  props:{
      text:{
          type:String,
          default:""

      },
   index:{
       type:Number
   }
  },
    data(){
        return{
            editMsg:this.text,
            isEdit:false
        };
    },
    methods:{
        showEditInput(){
            this.isEdit=true;
            this.$nextTick(()=>{
                this.$refs.inputRef.focus();
            })
            
        },
        test(){
            //this.$emit(''.this.index)
            //父级调用 fun(index)
        }
       
    },
};
</script>
<style scoped>

.item{
  width:200px;
  height:40px;
  line-height:40px;
  background:#40b883;
  color:white;
  border-bottom:1px solid #ccc;
  margin:0 auto;
  }
.edit{
  background:white;
  color:black;
}
</style>